<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="jquery.ssm.tooltip.js"></script>
	<script type="text/javascript" language="JavaScript">
		jQuery.noConflict();
	</script>
	<link href="jquery.ssm.tooltip.css" rel="stylesheet" type="text/css">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">


        .some_nice_block {
            border: 1px solid red;
            position: relative;
        }
        #svsvsv2 {
               top:10px;
         }
        .small_dot { border: 1px solid red; width:20px; height:20px; margin:40px; float:left }
        #float_dot { border: 1px solid green; left:0; top:120px; width:20px; height:20px;   position: absolute; }
	</style>
</head>
<body>

<div id="float_dot_text">avwem vwenvpjwviojw eovv </div>

<script type="text/javascript" language="JavaScript">

	go_go = function(obj, dir) {
		if (dir) {
			plo = '-'
		} else {
			plo = '+'
		}
		jQuery(obj).animate({
			left: plo + '=1000',
			top: plo + '=500'
		}, 10000, function() {
			dir = (dir) ? false : true;
			go_go(obj, dir);
		})
	}

	jQuery(document).ready(function() {
		jQuery('body').append('<div id="float_dot">x</div>');
		//go_go(jQuery('#float_dot'), false)


		for (o = 0; o < 13; o++) { jQuery('body').append('<div class="small_dot" id="x_' + o + '"> x' + o + '</div>') }
//		for (e = 0; e < 5; e++) {
//
//
//		jQuery().ssm('init', {
//            top:120 + e * 20
//			,left:120 + e * 20
//			,position: 'fixed'           //                  fixed
//			,timing:0                       //                  5000
//			,x_close : true                 //
//			,pointer : 'right'               //
//			,width : 100               //
////			,content : jQuery("#float_dot_text")
//			,content : jQuery("<p class='h'>это подсказка номер " + e + "</p>")
// 			,onStart : function() {}
//			,onClose : function() {}
//		});
//
//        }


		jQuery(".small_dot").ssm('mouseover', {
			top:0
			,left:0
			,width:300
			,position: 'absolute'
			,relative: true
			//            ,padding : 0
			//            ,margin : 40
			,autoclose:1000
			//            ,display : 'none'
			,content : jQuery("<p class='h'>test relative tooltip for multiply obj</p>")
			,pointer : 'right'
			//            ,onStart : function() { alert('open') }
			//            ,onClose : function() { alert('close') }
		});

		jQuery("#float_dot").ssm('mouseover', {

			relative: false                 //                  ili samo po sebe
			,top:0
			,left:0
			,position: 'absolute'           //                  fixed
			,timing:0
            ,relative: true			                     //                  5000
			,x_close : true                 //
			,pointer : 'right'               //
			,content : jQuery("#float_dot_text")
			//
			,onStart : function() {}
			,onClose : function() {}
		});

		jQuery().ssm('init', {
            top:120
			,left:120
			,position: 'absolute'           //                  fixed
			,timing:0                       //                  5000
			,x_close : true                 //
			,pointer : 'none'               //
			,width : 100               //
//			,content : jQuery("#float_dot_text")
			,content : jQuery("<p class='h'>mm<br>mmm<br>mmm<br>mmm<br>mmm</p>")
 			,onStart : function() {}
			,onClose : function() {}
		});

		jQuery("#float_dot_text").ssm('init', {
            top:320
			,left:320
			,position: 'absolute'           //                  fixed
			,timing:0                       //                  5000
			,x_close : true                 //
			,pointer : 'none'               //
			,width : 100               //
//			,content : jQuery("#float_dot_text")
			,content : jQuery("<p class='h'>mm<br>mmm<br>mmm<br>mmm<br>mmm</p>")
 			,onStart : function() {}
			,onClose : function() {}
		});


	});

</script>
</body>
</html>